<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
	<title>jQuery plugin: Tablesorter 2.4 - Themes</title>

	<!-- demo css -->
	<style>
	.minitable {float:left;min-width:190px; min-height: 280px; margin:5px;}
	.minitable table {width:175px;margin:10px auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
	.minitable table th {font-size:11px;}
	.minitable table td {font-size:11px;padding:4px !important;text-align:center;}
	.minitable h3 {text-align:center;text-transform:capitalize;}
	</style>

	<!-- jQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

	<!-- Tablesorter themes -->
	<!-- jquery ui -->
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/cupertino/jquery-ui.css" rel="stylesheet">
	<link href="../css/theme.jui.css" rel="stylesheet">

	<!-- bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="../css/theme.bootstrap.css" rel="stylesheet">

	<!-- more themes -->
	<link href="../css/theme.black-ice.css" rel="stylesheet">
	<link href="../css/theme.blue.css" rel="stylesheet">
	<link href="../css/theme.dark.css" rel="stylesheet">
	<link href="../css/theme.default.css" rel="stylesheet">
	<link href="../css/theme.dropbox.css" rel="stylesheet">
	<link href="../css/theme.green.css" rel="stylesheet">
	<link href="../css/theme.grey.css" rel="stylesheet">
	<link href="../css/theme.ice.css" rel="stylesheet">

	<!-- Tablesorter: required -->
	<script src="../js/jquery.tablesorter.js"></script>
	<script src="../js/jquery.tablesorter.widgets.js"></script>

<script>
$(function() {

	$.extend($.tablesorter.defaults, {
		widthFixed: true,
		widgets : ['zebra','columns'],
		sortList : [ [0,0],[1,0],[2,0] ]
	});

	$('.demo').tablesorter();

	// grey & dropbox themes need the {icon} for header icons
	$('.tablesorter-dropbox,.tablesorter-grey').tablesorter({
		headerTemplate: '{content}{icon}' // dropbox theme doesn't like a space between the content & icon
	});

	$('.tablesorter-bootstrap').tablesorter({
		theme : 'bootstrap',
		headerTemplate: '{content} {icon}',
		widgets    : ['zebra','columns', 'uitheme']
	});

	$('.tablesorter-jui').tablesorter({
		theme : 'jui',
		headerTemplate: '{content} {icon}',
		widgets    : ['zebra','columns', 'uitheme']
	});

});
</script>
</head>
<body>

<div id="main">

	<div class="minitable">
		<h3>blackice</h3>
		<table class="demo tablesorter-blackice">
			<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
			<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
			<tbody>
				<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
				<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
				<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
				<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
				<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
			</tbody>
		</table>
	</div>

	<div class="minitable">
		<h3>blue</h3>
		<table class="demo tablesorter-blue">
			<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
			<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
			<tbody>
				<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
				<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
				<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
				<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
				<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
			</tbody>
		</table>
	</div>

	<div class="minitable">
		<h3>dark</h3>
		<table class="demo tablesorter-dark">
			<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
			<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
			<tbody>
				<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
				<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
				<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
				<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
				<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
			</tbody>
		</table>
	</div>

	<div class="minitable">
		<h3>default</h3>
		<table class="demo tablesorter-default">
			<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
			<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
			<tbody>
				<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
				<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
				<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
				<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
				<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
			</tbody>
		</table>
	</div>

	<div class="minitable">
		<h3>green</h3>
		<table class="demo tablesorter-green">
			<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
			<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
			<tbody>
				<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
				<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
				<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
				<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
				<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
			</tbody>
		</table>
	</div>

	<div class="minitable">
		<h3>grey</h3>
		<table class="tablesorter-grey">
			<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
			<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
			<tbody>
				<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
				<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
				<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
				<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
				<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
			</tbody>
		</table>
	</div>

	<div class="minitable">
		<h3>ice</h3>
		<table class="demo tablesorter-ice">
			<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
			<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
			<tbody>
				<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
				<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
				<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
				<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
				<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
			</tbody>
		</table>
	</div>

	<div class="minitable">
		<h3>Bootstrap</h3>
		<table class="tablesorter-bootstrap">
			<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
			<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
			<tbody>
				<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
				<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
				<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
				<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
				<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
			</tbody>
		</table>
	</div>

	<div class="minitable">
		<h3>jQuery UI</h3>
		<table class="tablesorter-jui">
			<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
			<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
			<tbody>
				<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
				<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
				<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
				<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
				<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
			</tbody>
		</table>
	</div>

	<div class="minitable">
		<h3>dropbox</h3>
		<table class="tablesorter-dropbox">
			<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
			<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
			<tbody>
				<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
				<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
				<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
				<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
				<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
			</tbody>
		</table>
	</div>

</div>

</body>
</html>

